<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>行业协会报表</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				行业协会报表
				<el-button class="f-r" type="primary" icon="el-icon-plus">添加报表</el-button>
			</div>
			<div class="pd10">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item>
						<el-input v-model="formInline.name" type="text" placeholder="报表名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="title" label="名称"></el-table-column>
					<el-table-column prop="name" label="上传者"></el-table-column>
					<el-table-column prop="filesize" label="文件大小"></el-table-column>
					<el-table-column prop="number" label="已上传人数"></el-table-column>
					<el-table-column prop="time" label="上传时间"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button @click="handleDown(scope.row)" type="text" size="medium">下载</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="medium" class="color-F56C6C">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="bottomstate">
					<el-button type="danger" @click="batchDelete">批量删除</el-button>
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
					 layout="total,prev, pager, next,jumper" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</body>
	<script src="elementui-lib/lib/vue.js"></script>
	<script src="elementui-lib/lib/index.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					formInline: {
						name: ""
					},
					tableData: [{
						title: "《XXX》报表",
						name: "张三",
						filesize: "90kb",
						number: "50",
						time: "2020-02-14 18:40"
					}, {
						title: "《XXX》报表",
						name: "张三",
						filesize: "90kb",
						number: "50",
						time: "2020-02-14 18:40"
					}],
					// 修改
					title: "",
					dialogFormVisible: false,
					form: {
						name: "",
						linkUrl: ""
					},
					// 全选
					multipleSelection: []
				}
			},
			methods: {
				// 批量删除
				batchDelete() {
					let that = this
					if (that.multipleSelection.length>0) {
						that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
						}).catch(() => {
							that.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					} else {
						that.$message({
							type: 'warning',
							message: '请选择需要删除的数据'
						});
					}
				},
				handleSelectionChange(val) {
					console.log(val)
					this.multipleSelection = val;
				},
				search: function() {
					console.log(this.formInline)
				},
				handleDown: function(row) {
					console.log(row)
				},
				handleDelete: function(row) {
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
			},
			created() {

			},
		});
	</script>
</html>
